import "./index.css";

import ThemeContext, { Theme } from "../ThemeContext";
import { useContext, useState } from "react";

const ThemeChanger = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  const [isDark, setIsDark] = useState(false);

  const handleClick = (e) => {
    theme !== e.target.innerText && setTheme(e.target.innerText);
  };

  return (
    <>
      <div className="ThemeChangerContainer">
        <button onClick={handleClick}>{Theme.dark}</button>
        <button onClick={handleClick}>{Theme.light}</button>
      </div>
      <div className="ThemeIndicatorContainer">
        <div className={`ThemeIndicator ${isDark ? "dark" : ""}`}>
          Theme Indicator
        </div>
        <div className="CheckboxContainer">
          <label>
            <input
              type="checkbox"
              value={isDark}
              onChange={(e) => {
                setIsDark(e.target.checked);
              }}
            />
            dark
          </label>
        </div>
      </div>
    </>
  );
};

export default ThemeChanger;
